import dynamic from 'next/dynamic'
import { GetServerSideProps } from "next"
import Head from "next/head"
import Container from "../../components/Container"
import Layout from "../../components/Layout"

// 动态导入
const Error = dynamic(() => import('./../_error'), {
    loading: () => <div>loading</div>
})
// 如果不是默认导出的话，需要.then
// const Error = dynamic(() => import('./../_error').then(mod => mod.Error))

const Detail = (props) => {
    if (props.statusCode) { // 返回错误页面
        return <Error statusCode={props.statusCode} />
    }
    return (
        <Layout>
            <Head>
                <title>商品详情</title>
            </Head>
            <Container>
                <div className='main'>
                    id为{props.id}的商品详情
                    <div>
                        {/* 根目录public文件夹自动开启静态文件服务器 */}
                        <img src='/images/example.jpg' style={{ width: 200 }} />
                    </div>
                </div>
            </Container>
        </Layout>
    )
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
    return {
        props: {
            id: ctx.params.id,
            statusCode: 1,  // 请求服务端接口失败无法显示网页
        }
    }
}

export default Detail